<template>
  <div style="height: auto">
    <!-- 头部搜索 -->
    <el-card style="width: 100%; margin-bottom: 10px" shadow="never">
      <el-row>
        <el-col :span="2">
          <el-input
            v-model="ordDto.number"
            style="width: 120px"
            placeholder="订单编号"
          >
          </el-input>
        </el-col>

        <el-col :span="2">
          <el-select
            v-model="ordDto.tags"
            placeholder="国补类型"
            style="width: 120px"
          >
            <el-option label="高新国补" value="1" />
            <el-option label="成华国补" value="2" />
          </el-select>
        </el-col>

        <el-col :span="4">
          <el-date-picker
            v-model="ordDto.startTime"
            type="date"
            placeholder="开始时间"
            style="width: 130px"
          />
          <span class="text-gray-500">-</span>
          <el-time-picker
            v-model="ordDto.endTime"
            placeholder="截止时间"
            style="width: 130px"
          />
        </el-col>

        <el-col :span="2">
          <el-select
            v-model="ordDto.zt"
            placeholder="消单状态"
            style="width: 120px"
          >
            <el-option label="成功" value="4" />
            <el-option label="失败" value="5" />
          </el-select>
        </el-col>

        <el-col :span="2">
          <el-input
            v-model="ordDto.tel"
            style="width: 120px"
            placeholder="客户电话"
          />
        </el-col>

        <el-col
          style="display: flex; justify-content: flex-end; align-items: center"
          :span="2"
        >
          <el-space :size="20">
            <el-button type="primary" @click="handleSearch"
              >搜索</el-button
            >
            <el-button type="danger" @click="handleExport"
              >导出</el-button
            >
          </el-space>
        </el-col>
      </el-row>
    </el-card>

    <!-- 表格数据展示 EEF7FD -->

    <el-table :data="tableData" border v-loading="loading" style="width: 100%">
      <el-table-column
        prop="dispatchingnumber"
        label="配送大单"
        width="120"
        align="center"
      />

      <el-table-column
        prop="orderNumber"
        label="送货单号"
        width="100"
        align="center"
      />
     

      <el-table-column
        prop="timeWindowDateFrom"
        label="预约时间"
        align="center"
        width="120"
      >
        <template #default="scope">
          {{ scope.row.deliveryTime }}({{ scope.row.periodTime }})
        </template>
      </el-table-column>

      <el-table-column
        prop="username"
        label="用户名"
        width="120"
        align="center"
      />
      <el-table-column prop="tel" label="电话" width="120" align="center" />
      <el-table-column prop="tel" label="订单类型" width="120" align="center" />
      <el-table-column prop="tags" label="是否国补" width="120" align="center">
        <template #default="scope">
          <el-button
            type="primary"
            plain
            v-if="scope.row.tags == '1'"
            size="small"
            >高新国补</el-button
          >
          <el-button
            type="success"
            plain
            v-if="scope.row.tags == '2'"
            size="small"
            >成华国补</el-button
          >
          <el-button
            type="danger"
            plain
            v-if="scope.row.tags == '0'"
            size="small"
            >其他</el-button
          >
        </template>
      </el-table-column>

      <el-table-column prop="tel" label="订单类型" width="120" align="center" />
      <el-table-column prop="tel" label="订单类型" width="120" align="center" />
      <el-table-column prop="tel" label="订单类型" width="120" align="center" />
      <el-table-column prop="tel" label="订单类型" width="120" align="center" />

      <el-table-column prop="address" label="地址" align="center" />
      
      <el-table-column
        prop="cancellationTime"
        label="消单时间"
        align="center"
        width="120"
      />
      <el-table-column
        prop="cancellationTime"
        label="消单状态"
        align="center"
        width="120"
      />
      <el-table-column
        prop="cancellationTime"
        label="师傅提交时间"
        align="center"
        width="120"
      />
 
      <el-table-column
        prop="pushStatus"
        label="推送状态"
        align="center"
        width="80"
      >
      </el-table-column>

      <el-table-column
        prop="orderType"
        label="送货类型"
        width="80"
        align="center"
      >
        <template #default="scope">
          {{ scope.row.cancellationType }}({{ scope.row.deliveryCode }})
        </template>
      </el-table-column>

      <el-table-column prop="isPush" label="是否推送" width="80" align="center">
        <template #default="scope">
          {{ scope.row.isPush == 0 ? "已推送" : "未推送" }}
        </template>
      </el-table-column>

      <el-table-column
        prop="vehicleName"
        label="师傅信息"
        width="120"
        align="center"
      >
        <template #default="scope">
          {{ scope.row.vehicleName }}({{ scope.row.vehicleTel }})
        </template>
      </el-table-column>

      <el-table-column prop="state" label="操作" align="center" width="80">
        <template #default="scope">
          <el-button
            :icon="User"
            type="primary"
            size="small"
            v-has="`btn:user:per:role`"
            @click="handleRole(scope.row)"
          >
            查看
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div style="margin-top: 10px; text-align: center !important">
      <el-pagination
        :current-page="pageNo"
        :page-size="pageSize"
        :small="small"
        :disabled="disabled"
        layout="total, prev, pager, next"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>
    
    <script setup>
import { ref, onMounted } from "vue";

import { findCancelOrderListPage } from "@/api/order";
import { ElLoading } from "element-plus";
const loading = ref(true);

const tableData = ref([]);
const pageNo = ref(1);
const pageSize = ref(10);
const total = ref(0);

const ordDto = ref({
  tel: "",
  times: "",
  zt: "",
  number: "",
  tags: "",
  orderNumber: "",
  startTime: "",
  endTime: "",
});

onMounted(() => {
  getList();
});

const handleSearch = () => {
  getList();
};

const handleExport = () => {
  window.open(
    `${import.meta.env.VITE_APP_BASE_API}/ikeaOrder/findExp?typeId=2&tags=${ordDto.value.tags}`
  );
};

const getList = () => {
  findCancelOrderListPage(ordDto.value).then((res) => {
    loading.value = false;
    if (res.code === 200 && res.data !== null) {
      tableData.value = res.data.tableData;
      total.value = res.data.total;
    }
  });
};
const handleSizeChange = (val) => {
  pageSize.value = val;
  getList();
};

const handleCurrentChange = (val) => {
  pageNo.value = val;
  getList();
};
</script>
  <style scoped>
/*最外层透明*/
::v-deep .el-table,
::v-deep .el-table__expanded-cell {
  background-color: transparent !important;
}
/* 表格内背景颜色 */
::v-deep .el-table th,
::v-deep .el-table tr,
::v-deep .el-table td {
  background-color: transparent !important;
  border: 0;
  color: #135294;
}
/*去除底边框*/
::v-deep.el-table td.el-table__cell {
  border: 0;
}
::v-deep.el-table th.el-table__cell.is-leaf {
  border: 0;
}
/*去除底部灰条.el-table::before*/
::v-deep .el-table::before {
  display: none;
}
</style>